<script>
import HolesTable from './holesTable.vue'
import _ from 'loadsh'
import LineComponent from './line'
import { weSprCv2Upload } from '@/api/table'
export default {
  components: {
    HolesTable,
    LineComponent
  },
  props: {
    computedData: {
      type: Object,
      default: () => {}
    },
    isDeatailPage: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    computedData: {
      deep: true,
      immediate: true,
      handler(value) {
        this.tableData = this.setTableData(value.data)
        this.resultData = _.cloneDeep(value)
      }
    }
  },
  data() {
    return {
      tableData: [],
      resultData: {},
      isResubmitLoading: false,
    }
  },
  mounted () {
    console.log(window.innerWidth, '宽度')
  },
  methods: {
    handleChange(hole) {
      this.tableData.forEach(item => {
        if(item.hole === hole) {
          item.isEdit = !item.isEdit
          item.editValue =  item.isEdit ? '' :  item.value
        }
      })
    },
    async onceMorecomputedData() {      
      this.isResubmitLoading = true
      const data = this.tableData.reduce((prev, curr) => {
          const value = curr.isEdit ? curr.editValue : curr.value
          prev[curr.hole] = value == 0 ? '' : value
          return prev
      }, {})
      try {
        const res = await weSprCv2Upload({
          uuid: this.resultData.uuid,
          data: data
        })
        this.resultData = res.data
        // this.tableData = this.setTableData(res.data.data)
        this.$message.success('重新计算成功')
      } catch(err) {
        return console.log(err)
      } finally {
        this.isResubmitLoading = false
      }
    },
    setTableData(data = {}) {
      const result = (Object.keys(data).length && Object.entries(data)?.map(item => {
        return {
          hole: item[0],
          value: item[1] || 0,
          isEdit: false,
          editValue: item[1]
        }
      })) || []
      return _.cloneDeep(result)
    },
    handleClear() {
      this.$emit('handleClear')
    }
  }
}
</script>
<template>
  <div class="detail_page">
    <div class="btn_content">
      <el-button 
        v-show="!isDeatailPage"
        class="uploadBtn"
        type="primary"
        @click="handleClear"
      >{{ $t('page.clearData') }}</el-button>
      <el-button 
        v-show="!isDeatailPage"
        class="uploadBtn"
        type="primary"
        :loading="isResubmitLoading"
        @click="onceMorecomputedData"
      >{{ $t('page.recalculate') }}</el-button>
    </div>
    <table style="margin-left: 40px;" border cellpadding="10" cellspacing="0">
      <tr>
        <td>{{$t('page.parameter')}}</td>
        <td>
          <p style="white-space: nowrap;" v-for="(value, key, index) in resultData.parme" :key="index">
            {{key}}：{{value}}
          </p>
        </td>
      </tr>
    </table>
    <div class="detail_top">
      <HolesTable
        style="width: auto;margin-right: 20px;" 
        v-model="tableData"
        :isDeatailPage="isDeatailPage"
        @handleChange="handleChange"
      ></HolesTable>
      <LineComponent :serviceData="resultData.data || {}"></LineComponent>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.detail_page {
  text-align: center;
  .uploadBtn {
    width: 180px;
    margin-top: 50px;
  }
  .detail_top {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 40px;
  }
}
// @media screen and (max-width: 2500px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
//   .detail_top {
//     display: flex;
//     flex-direction: column;
//   }
// }
</style>